import React from "react";
import BraftEditor from "braft-editor";
import "braft-editor/dist/index.css";
import { ContentUtils } from "braft-utils"
import { ImageUtils } from "braft-finder"
import { Upload } from "antd"
import {PictureOutlined} from "@ant-design/icons";
import GUtils from "@/utils";
const controls = ["bold", "italic", "underline", "text-color", "separator", "link", "separator", "media"]


export default class LdhEditor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            editorState: BraftEditor.createEditorState(props.value || "")
        }
        this.extendControls = [
            {key: "custom-button", type: "button", text: "预览", onClick: this.preview.bind(this)},
            {key: "antd-uploader",type: "component",
                component: (


                        <button type="button" className="control-item button upload-button" data-title="插入图片">
                            <Upload
                                accept="image/*"
                                showUploadList={false}
                                //customRequest={this.uploadHandler}
                                onChange={this.handleImageContentChange.bind(this)}
                                action={GUtils.uploadUrl}
                            >
                            <PictureOutlined />
                            </Upload>
                        </button>

                )
            }
        ]
    }

    componentWillReceiveProps(nextProps, nextContext) {
        this.setState({editorState: BraftEditor.createEditorState(nextProps.value || "")})
    }

    handleChange(editorState) {
        this.setState({editorState});
        let {onChange} = this.props;
        onChange && onChange(editorState);
    }

    handleImageContentChange(info){
        let rsp = info.file.response;
        if(rsp && rsp.success){
           let url = rsp.vo.url;
           let {editorState} = this.state;
            editorState = ContentUtils.insertMedias(editorState, [{
                type: "IMAGE",
                url: url
            }])
            this.handleChange(editorState);

        }
       /* if (info.file.response.message == "success") {
            setContent(ContentUtils.insertMedias(content, [{
                type: 'IMAGE',
                url: info?.file?.response?.url
            }]))
        }*/
    }

    // 上传
    uploadHandler = (param) => {
        if (!param.file) {
            return false
        }
        this.setState({
            editorState: ContentUtils.insertMedias(this.state.editorState, [{
                type: "IMAGE",
                url: URL.createObjectURL(param.file)
            }])
        })

    }

    // 预览
    preview() {
        let {editorState} = this.state;
        GUtils.openPreviewWindow(buildHtml(editorState));
    }


    render() {

        return <BraftEditor className="ldh-editor" placeholder="请输入正文内容" extendControls={this.extendControls}

                            {...this.props}    value={this.state.editorState} onChange={this.handleChange.bind(this)}/>
    }

}

const buildHtml=(editorState)=>{
    let html = editorState.toHTML();

    html = html.replaceAll("<img src", '<img class="image-wrap" src')
    html = html.replaceAll("<p></p>", '')
    return html;
}
export {buildHtml}
